<template>
    <a-card>
        <!-- Search -->
        <div :class="advanced ? 'search' : null">
            <a-form layout="horizontal">
                <div :class="advanced ? null: 'fold'">
                    <a-row >
                        <a-col :md="8" :sm="24" >
                            <a-form-item
                                    label="ID"
                                    :labelCol="{span: 5}"
                                    :wrapperCol="{span: 18, offset: 1}"
                                    style="margin-right: 10px"
                            >
                                <a-input v-model="query.id" placeholder="请输入"/>
                            </a-form-item>
                        </a-col>
                        
                        <a-col :md="8" :sm="24">
                            <a-form-item
                                    label="模板名"
                                    :labelCol="{span: 5}"
                                    :wrapperCol="{span: 18, offset: 1}"
                                    style="margin-right: 10px"
                            >
                                <a-input v-model="query.name" placeholder="请输入"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </div>
                <span style="float: right; margin-top: 3px;">
          <a-button type="primary" @click="loadData">查询</a-button>
          <a-button style="margin-left: 8px" @click="reset">重置</a-button>
          <a @click="toggleAdvanced" style="margin-left: 8px">
            {{advanced ? '收起' : '展开'}}
            <a-icon :type="advanced ? 'up' : 'down'" />
          </a>
        </span>
            </a-form>
        </div>

        <!-- Operator And Table -->
        <div>
            <a-space class="operator">

                <a-button @click="addNew" type="primary">新建</a-button>
                <a-button >批量操作</a-button>
                <a-dropdown>
                    <a-menu @click="handleMenuClick" slot="overlay">
                        <a-menu-item key="delete">删除</a-menu-item>
                        <a-menu-item key="audit">审批</a-menu-item>
                    </a-menu>
                    <a-button>
                        更多操作 <a-icon type="down" />
                    </a-button>
                </a-dropdown>
            </a-space>
            <standard-table
                    :columns="columns"
                    :dataSource="dataSource"
                    :selectedRows.sync="selectedRows"
                    :pagination="pagination"
                    rowKey="id"
                    @clear="onClear"
                    @change="onChange"
                    @selectedRowChange="onSelectChange"
            >

                <div slot="action" slot-scope="{text, record}">
                    <a style="margin-right: 8px">
                        <a-icon type="edit"/><router-link :to="`/template/update/${record.id}`">编辑</router-link>
                    </a>
                    <!--<a @click="deleteRecord(record.key)">
                        <a-icon type="delete" />删除1
                    </a>-->
                    <!--<a @click="deleteRecord(record.key)" v-auth="`delete`">-->
                    <a @click="deleteRecord(record.id)"  style="margin-right: 5px;color: red">
                        <a-icon type="delete" />删除
                    </a>
                    <a style="margin-right: 8px">
                        <a-icon type="file-search" /><router-link :to="`/template/detail/${record.id}`" >详情</router-link>
                    </a>
                </div>
                <template slot="statusTitle">
                    <a-icon @click.native="onStatusTitleClick" type="info-circle" />
                </template>
            </standard-table>
        </div>
    </a-card>
</template>

<script>
    import StandardTable from '@/components/table/StandardTable';
    import {
        templateService,
    } from "@/services";
    import {templateColumns} from "@/columns";

    /*表头*/
    const columns = templateColumns;

    /*数据*/
    const dataSource = []

    export default {
        name: 'TemplateList',
        components: {StandardTable},
        data () {
            return {
                advanced: true,
                columns: columns,
                /*分页器*/
                pagination:{
                    current:1,
                    pageSize:10,
                    total:0
                },
                dataSource: dataSource,
                selectedRows: [],
                /*查询参数*/
                query:{
                    id:'',
                    name:'',
                    current:1,
                    size:10
                },

                /*其他数据*/
            }
        },
        /*authorize: {
            deleteRecord: 'delete'
        },*/
        created() {
            this.refresh();
        },
        methods: {
            /*刷新方法*/
            refresh() {
                this.loadData();
                this.loadOtherData();
            },

            /*主数据：Template*/
            async loadData() {
                /*构建请求参数*/
                this.query.current = this.pagination.current;
                this.query.size = this.pagination.pageSize;

                /*请求接口*/
                const result = await templateService.page(this.query);
                this.dataSource = result.data.records;

                /*刷新分页信息*/
                this.pagination.current = result.data.current;
                this.pagination.pageSize = result.data.size;
                this.pagination.total = result.data.total;
            },
            async deleteRecord(id) {
                this.$confirm({
                    title: '删除' + id,
                    content:'确定删除id为' + id + "的这一项吗",
                    onOk:async () => {
                        const result =  await templateService.remove(id);
                        if (result.code == 204) {
                            this.loadData();
                            this.$message.success('删除成功');
                        } else {
                            this.$message.error('删除失败:' + result.msg);
                        }
                    }
                })

            },
            reset() {
                this.query.id = '';
                this.query.name = '';
            },
            toggleAdvanced () {
                this.advanced = !this.advanced
            },
            remove () {
                this.dataSource = this.dataSource.filter(item => this.selectedRows.findIndex(row => row.key === item.key) === -1)
                this.selectedRows = []
            },
            onClear() {
                this.$message.info('您清空了勾选的所有行')
            },
            onStatusTitleClick() {
                this.$message.info('你点击了状态栏表头')
            },
            onChange(pagination) {
                this.pagination = pagination;
                this.loadData();
            },
            onSelectChange() {
                this.$message.info('选中行改变了')
            },
            addNew () {
                this.$router.push("/template/form/")
            },
            handleMenuClick (e) {
                if (e.key === 'delete') {
                    this.remove()
                }
            },

            /*其他数据*/
            async loadOtherData() {
            },
        }
    }
</script>

<style lang="less" scoped>
    .search{
        margin-bottom: 54px;
    }
    .fold{
        width: calc(100% - 216px);
        display: inline-block
    }
    .operator{
        margin-bottom: 18px;
    }
    @media screen and (max-width: 900px) {
        .fold {
            width: 100%;
        }
    }
</style>
